<template>
  <div>
    <div class="job_companyDetails">
      <div class="job_Details">
        <div class="job_Details_name">
          <p class="job_name">{{details.title}}</p>
          <div class="NumberBooths">
            <h1>{{total}}/{{details.boothNum || 50}}</h1>
            <span>展位数量</span>
          </div>
        </div>
        <div class="job_content">
          <p class="job_contacts">联系人：{{details.contact || '无'}}</p>
          <p class="jobFair_Holding">
            <span><i class="el-icon-time"
                style="color:rgba(24,147,252,1);margin-right:5px;font-size:16px;"></i>举办时间：{{details.holdTime}}</span>
            <span><i class="el-icon-phone"
                style="color:rgba(24,147,252,1);margin-right:5px;font-size:16px;"></i>联系电话：{{details.phone || '暂无'}}</span>
          </p>
          <p class="jobFair_SponsorUnit">
            <span>主办单位：{{details.sponsor || '暂无'}}</span>
            <span>承办单位：{{details.organizer || '暂无'}}</span>
          </p>
          <p class="jobFair_name">招聘会说明</p>
          <!-- <p class="job_Explain"> {{details.remark || '暂无'}}</p> -->
          <el-input class="job_Explain" type="textarea" readonly="readonly" v-model="details.remark"></el-input>
        </div>
      </div>
      <div class="job_adress">
        <div class="job_map">
          <!-- 地图 -->
          <maps :latLng="latLng" :address='details.address' v-if="showMap"></maps>
        </div>
        <p class="job_bus_adress">举办地址：{{details.address || '人力资源服务中心'}}</p>
        <p class="job_bus_adress">乘车路线：{{details.route || '暂无'}}</p>
      </div>
    </div>

    <!-- 公司相关信息 -->
    <div class="job_company_info" v-for="(item,index) in companyList" :key="index">
      <h1 class="job_company_name" @click="companyName(item)">
        {{item.shortName ?  item.shortName : (item.name || '科大讯飞股份有限公司')}}
        <div class="tag-group">
          <el-tag v-for="(tag, index) in item.allureArr" :key="index" :type="tag" effect="plain">
            {{ tag }}
          </el-tag>
        </div>
      </h1>
      <div class="company_position">
        <div class="company_position_info" v-for="(jobFairOutVoList, index) in item.jobVo" :key="index"
          @click="jobToDetais(jobFairOutVoList)">
          <div class="job_logo">
            <img :src="(item.companyOutVo.logo || require('../../../assets/img/qiye.png'))" alt="">
          </div>
          <div class="job_information">
            <p>{{jobFairOutVoList.name || '暂无'}}</p>
            <p>{{jobFairOutVoList.educationText || '学历不限'}} | {{jobFairOutVoList.workExpText || '经验不限'}}
            </p>
            <p> {{item.shortName ?  item.shortName : (item.name || '科大讯飞股份有限公司')}}</p>
          </div>
          <div class="job_salary">
            {{jobFairOutVoList.wageText}}
          </div>
        </div>
      </div>
      <div class="seeMore" v-if="item.jobVo && !item.isDisabled" @click="manyJob(item)">查看更多</div>
      <div class="seeMores" v-if="item.isDisabled"></div>
      <!-- <div class="seeMore" v-if="item.jobVo" @click="manyJob(item)">没有更多了</div> -->
      <div class="seeMore zwzw" v-if="!item.jobVo">
        <img src="../../../assets/img/zwzw.png" alt="">
        <p class="txt">暂无职位，请关注招聘会现场</p>
      </div>
    </div>
    <div class="pagination" v-show="total!=0">
      <el-pagination background layout="prev, pager, next" @current-change="currentChange" :page-size="6"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { listDetails, findJobByCompany, manyJob } from '../../../api/jobFair';
export default {
  data () {
    return {
      showMap: false,
      latLng: {
        lat: "27.826867",
        lng: "113.082216"
      },
      details: {},
      items: [
        { type: 'info', label: '高薪企业' },
        { type: 'danger', label: '节日福利' }
      ],
      // 企业信息
      companyList: [],
      query: {
        page: 1,
        size: 6
      },
      total: 0,
      moreQuery: {
        arr: [
          [{ column: 'company_id', type: 'eq', value: 0 }, { column: "include", type: "", value: "D,CN,CI" }],
          [{ column: 'create_time', type: 'asc' }],
        ]
      }
    }
  },
  methods: {
    // 请求公司详情信息头部
    listDetails () {
      let id = this.$route.query.id
      listDetails(id).then((data) => {
        if (data.success) {
          // console.log(data.data, '请求陈工')
          if (data.holdDateType == 1) {
            data.data.holdTime = (data.data.holdStartDate || '') + '    ' + (data.data.holdStartTime ? data.data.holdStartTime + ' - ' : '') + (data.data.holdEndTime || '')
          } else {
            data.data.holdTime = (data.data.holdStartDate ? data.data.holdStartDate + '-' : '') + (data.data.holdEndDate || '') + '     ' + (data.data.holdStartTime ? data.data.holdStartTime + '-' : '') + (data.data.holdEndTime || '')
          }
          this.details = data.data
          if (
            !this.details.remark
          ) {
            this.details.remark = '暂无'
          }

          this.latLng = {
            lat: data.data.lat,
            lng: data.data.lng,
          }
          console.log(this.latLng, 'latLng')
          this.$nextTick(() => {
            this.showMap = true;
          })

          // this.companyCounts()
        }
      })
    },
    // feat:去掉这个请求 展位数量
    // companyCounts () {
    //   companyCount(this.details.id).then((data) => {
    //     if (data.success) {
    //       this.companyCount = data.data
    //     } else {
    //       this.$message.error(data.msg)
    //     }
    //   })
    // },
    // 请求公司名称，及相关职位信息
    findJobByCompany () {
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });
      let id = this.$route.query.id
      let formData = new FormData()
      formData.append('page', this.query.page)
      formData.append('size', this.query.size)
      formData.append('jobFairId', id)
      formData.append('sort', JSON.stringify(this.moreQuery.arr[1]))
      findJobByCompany(formData).then((data) => {
        if (data.success) {
          let datas = data.data
          let arr = []
          //   g给公司标签 转换为数组
          // datas.records.map((item) => {
          //   if (item.allList) {
          //     item.allList = item.allList.split(',')
          //   }
          // })

          datas.records.map((item) => {
            let allureArr = []
            // 返回数据是对象 首先遍历
            for (let key in item.allList) {
              // 返回数据是对象里面套对象 首先遍历
              for (let index in item.allList[key]) {
                // 取到对象直接拿到key值
                allureArr.push(item.allList[key][index].data)
                // 重新赋值 得到标签
                item.allureArr = allureArr
              }
            }
          })
          this.companyList = datas.records
          this.total = datas.total
          // console.log(data.data, '请求成功')
          loading.close()
        } else {
          loading.close()
        }
      }).catch(() => {
        loading.close()
      })
    },
    // 电击查看更多
    manyJob (company) {
      let loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.1)'
      });
      let that = this
      that.moreQuery.arr[0][0].value = company.companyId
      let formData = new FormData()
      // formData.append('companyId', )
      formData.append('page', 1)
      formData.append('size', 50)
      // formData.append('condition', JSON.stringify(that.moreQuery.arr[0]));
      // feat: 传参格式变了
      formData.append('companyId', company.companyId)
      formData.append('jobFairId', this.$route.query.id)
      formData.append('sort', JSON.stringify(that.moreQuery.arr[1]))
      manyJob(formData).then((res) => {
        if (res.success) {
          let datas = res.data.records || []
          that.companyList.map((item, i) => {
            // 对原有数据进行合并
            if (item.companyId == company.companyId) {
              item.jobVo = datas
              item.isDisabled = true
            }
          })
          that.companyList = that.companyList
          loading.close()
        } else {
          loading.close()
        }
      })
    },
    // 跳转公司详情
    companyName (obj) {
      // feat: 只有企业ID的才可以跳转
      if (obj.companyId) {
        const { href } = this.$router.resolve({
          path: "/Popularenterprises",
          query: {
            companyId: obj.companyId
          }
        });
        window.open(href, '_blank');
      }
      // this.$router.push({
      //   path: '/Popularenterprises',
      //   query: { id: obj.companyId }
      // })
    },
    // 跳转职位详情
    jobToDetais (obj) {
      const { href } = this.$router.resolve({
        path: "/JobHunting/jobdetail",
        query: {
          id: obj.id,
          category: obj.category
        }
      });
      window.open(href, '_blank');
    },
    currentChange (val) {
      console.log(val, 'currentChange 请求')
      // this.$set(this.query, 'page', val);
      this.query.page = val
      this.findJobByCompany();
    }
  },
  created () {
    this.listDetails()
    this.findJobByCompany()
  }
}
</script>

<style scoped>
.job_companyDetails {
    width: 1126px;
    height: 348px;
    margin: 0 auto 36px auto;
    display: flex;
    padding: 36px 34px 40px 44px;
    justify-content: space-between;
    background: #ffffff;
}
.job_Details {
    width: 828px;
    height: 100%;
    padding-right: 40px;
    border-right: 2px solid rgba(204, 204, 204, 1);
}
.job_Details_name {
    display: flex;
    justify-content: space-between;
}
.job_name {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 16px;
    color: rgba(51, 51, 51, 1);
    line-height: 40px;
    opacity: 1;
}
.NumberBooths h1 {
    font-size: 42px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(0, 155, 62, 1);
    opacity: 1;
}
.NumberBooths span {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
}
.job_contacts {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    margin-bottom: 14px;
}
.jobFair_Holding {
    height: 20px;
    font-size: 14px;
    display: inline-block;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 16px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
}
.jobFair_Holding span:nth-child(1) {
    margin-right: 33px;
}
.jobFair_SponsorUnit {
    display: inline-block;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 30px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
}
.jobFair_SponsorUnit span:nth-child(1) {
    margin-right: 33px;
}

.jobFair_name {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 16px;
    margin: 32px 0 21px 0;
    position: relative;
}
.jobFair_name:after {
    position: absolute;
    content: '';
    display: inline-block;
    width: 28px;
    height: 2px;
    left: 0;
    top: 20px;
    background: #0093ff;
}
.job_Explain {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 26px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    /* height: 150px; */
    overflow: scroll;
}
.job_content /deep/ .el-textarea__inner {
    color: rgba(34, 34, 34, 1);
    font-size: 14px;
    height: 150px;
    overflow: scroll;
    border: none;
}
.job_adress {
    width: 322px;
    height: 100%;
}

.job_map {
    width: 243px;
    height: 168px;
    /* background: rgba(232, 232, 232, 1); */
    opacity: 1;
    margin: 29px auto 0 auto;
}

.job_bus_adress {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    margin-top: 20px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    margin-left: 30px;
}

.job_company_info {
    width: 1200px;
    margin: 0 auto;
}
.job_company_name {
    width: calc(100%-44px);
    height: 50px;
    line-height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: rgba(34, 34, 34, 1);
    padding-left: 44px;
    background: #fff;
    opacity: 1;
    display: flex;
    cursor: pointer;
    position: relative;
}
.job_company_name:after {
    position: absolute;
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    left: 33px;
    top: 17px;
    background: #0093ff;
}
.tag-group .el-tag {
    margin-left: 12px;
}

.company_position {
    display: flex;
    flex-wrap: wrap;
    margin-right: -10px;
    /* justify-content: space-between; */
}
.company_position_info {
    width: calc(32.5% - 48px);
    height: 130px;
    padding: 0 24px;
    margin-top: 16px;
    margin-right: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fff;
}

.job_logo {
    width: 68px;
    height: 68px;
    border-radius: 5px;
    background: rgba(242, 242, 242, 1);
}
.job_logo img {
    width: 100%;
    height: 100%;
}
.job_information {
    height: 87px;
    width: 140px;
}
.job_information p {
    line-height: 35px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    width: 186px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgba(85, 85, 85, 1);
}
.job_salary {
    /* width: 75px; */
    height: 72px;
}
.job_salary {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: rgba(253, 78, 64, 1);
    opacity: 1;
}
.seeMore {
    width: 340px;
    height: 40px;
    margin: 30px auto;
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(24, 147, 252, 1);
    cursor: pointer;
}
.seeMores {
    width: 340px;
    height: 40px;
    margin: 30px auto;
    /* border: 1px solid rgba(24, 147, 252, 1); */
    opacity: 1;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(24, 147, 252, 1);
    cursor: pointer;
}
.zwzw {
    width: 1200px;
    height: 122px;
    display: flex;
    align-items: center;
    border: none;
    flex-flow: column;
    margin: 30px auto;
    opacity: 1;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    background: #fff;
    color: rgba(24, 147, 252, 1);
}
.zwzw img {
    margin-top: 20px;
}
.zwzw p {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    margin-top: 10px;
    color: rgba(117, 117, 117, 1);
    opacity: 1;
}
.pagination {
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.el-pagination.is-background /deep/ .btn-next,
.el-pagination.is-background /deep/.btn-prev,
.el-pagination.is-background /deep/.el-pager li {
    background-color: #fff;
}
</style>